<template>
  <div id="answerQuestionView">
    <h1 style="text-align: center">{{ bank.title }}</h1>
    <a-list :scrollbar="scrollbar" :bordered="false">
      <!-- 选择题区域 -->
      <a-list-item v-for="(item,index) in selectQuestions" :key="item.id">
        <!-- <a-list>定义了滚动列表下的每一个题目-->
        <a-list>
          <template #header>
            {{ index + 1 }}.{{ item.content }}
          </template>
          <!-- 定义了一个题目中的每一个选项-->
          <a-radio-group direction="vertical">
            <a-radio
                class="option"
                v-for="option in item.options"
                :value="option.key"
                :key="option.key"
                @click="clickOption(item.id , option.key)"
            >
              {{ option.key }}.{{ option.value }}
            </a-radio>
          </a-radio-group>
        </a-list>
      </a-list-item>
      <!-- 判断题区域 -->
      <a-list-item v-for="(item,index) in judgeQuestions" :key="item.id">
        <!-- <a-list>定义了滚动列表下的每一个题目-->
        <a-list>
          <template #header>
            {{ index + 1 + selectQuestions.length }}.{{ item.content }}
          </template>
          <!-- 定义了一个题目中的每一个选项-->
          <a-radio-group direction="vertical">
            <a-radio
                class="option"
                value="1"
                @click="clickOption(item.id , 1)"
            >
              A.正确
            </a-radio>
            <a-radio
                class="option"
                value="0"
                @click="clickOption(item.id , 0)"
            >
              B.错误
            </a-radio>
          </a-radio-group>
        </a-list>
      </a-list-item>
      <a-list-item>
        <a-row align="center">
          <a-col align="center">
            <a-button type="primary" @click="submitAnswer" :loading="loading">提交</a-button>
          </a-col>
        </a-row>
      </a-list-item>
    </a-list>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {
  getQuestionBankVOByIdUsingGet,
} from "@/api/QuestionBankRequest";
import router from "@/router/router";
import {addAnswerResultUsingPost} from "@/api/AnswerResultRequest";
import {getQuestionByBankId} from "@/api/QuestionRequest";
import {mapToObject} from "@/utils/ConvertUtil";

const route = useRoute();
// 定义题目列表属性，数组的元素为QuestionVO
let selectQuestions = ref([]);
let judgeQuestions = ref([]);

// 定义Map记录用户的选项，key为questionId，value为ABC或者0 1
let selections = new Map();
const bankId = route.params.bankId;
let bank = ref({});

const loading = ref(false);


// 页面挂载之后渲染传递过来的题库内容
onMounted(async () => {
  // 获取当前题库的所有题目信息
  let result = await getQuestionByBankId(bankId);
  result.data.data.forEach((item) => {
    selections.set(item.id, null);
    if (item.type === 0) {
      selectQuestions.value.push(item);
    } else if (item.type === 1) {
      judgeQuestions.value.push(item);
    }
  })

  // 获取题库信息
  result = await getQuestionBankVOByIdUsingGet(bankId);
  bank.value = result.data.data;
})

async function submitAnswer() {
  let selectionsObj = mapToObject(selections)
  console.log(selectionsObj)
  loading.value = true;
  const result = await addAnswerResultUsingPost({
    questionBankId: bankId,
    questionBankName: bank.value.title,
    options: selectionsObj
  });
  loading.value = false;
  router.push("/answerResult/" + result.data.data);
}

function clickOption(questionId, key) {
  console.log("选择了" + questionId + "的" + key);
  selections.set(questionId, key);
}
</script>

<style scoped>
.option {
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>